<template>
  <div class="qq-groups-container">
    <!-- 顶部横幅 -->
    <div class="hero-banner">
      <img src="@/assets/img/Home/bg-th3.png" alt="交流群背景" class="hero-image">
      <div class="hero-overlay">
        <h1>交流群汇总</h1>
        <p>加入兴趣社群 · 结识同好伙伴 · 获取最新资讯</p>
      </div>
    </div>

    <div class="container">
      <!-- 搜索和筛选 -->
      <div class="search-filter">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery"
            placeholder="搜索群名称或描述..."
            class="form-control"
          >
          <i class="fas fa-search"></i>
        </div>
        <div class="filter-tags">
          <button 
            v-for="category in categories" 
            :key="category.id"
            @click="toggleCategory(category.id)"
            :class="{ active: selectedCategories.includes(category.id) }"
            class="btn btn-sm btn-outline-primary"
          >
            {{ category.name }}
          </button>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="text-center py-5">
        <div class="spinner-border text-primary" role="status"></div>
        <p class="mt-3">正在加载群组信息...</p>
      </div>

      <!-- 群组列表 -->
      <div class="groups-section" v-else>
        <!-- 按分类分组 -->
        <div v-for="category in filteredCategories" :key="category.id" class="category-group">
          <h2 class="category-title">
            <i :class="category.icon"></i>
            {{ category.name }}
            <span class="badge bg-primary">{{ getGroupCount(category.id) }}</span>
          </h2>
          
          <div class="group-list">
            <div 
              v-for="group in getGroupsByCategory(category.id)" 
              :key="group.group_id"
              class="group-card"
            >
              <div class="group-avatar">
                <img :src="'https://p.qlogo.cn/gh/' + group.group_id + '/' + group.group_id + '/640'" :alt="group.group_name">
              </div>
              <div class="group-info">
                <h3>
                  {{ group.group_name }}
                  <span v-if="!group.api_success" class="badge bg-warning">信息不完整</span>
                </h3>
                <p class="group-id">{{ group.group_id }}</p>
                <p class="group-desc">{{ group.description }}</p>
                <div class="group-meta" v-if="group.api_success">
                  <span><i class="fas fa-users"></i> {{ group.member_count }}人/{{ group.max_member_count }}人</span>
                </div>
              </div>
              <div class="group-actions">
                <a 
                  v-if="group.url"
                  :href="group.url" 
                  target="_blank"
                  class="btn btn-primary btn-join"
                >
                  <i class="fab fa-qq"></i> 加入群聊
                </a>
                <button 
                  @click="copyGroupNumber(group.group_id)"
                  class="btn btn-outline-secondary btn-copy"
                >
                  <i class="far fa-copy"></i> 复制群号
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 无结果提示 -->
        <div v-if="filteredGroups.length === 0 && !loading" class="no-results">
          <i class="fas fa-search fa-3x"></i>
          <h3>未找到匹配的交流群</h3>
          <p>尝试调整搜索关键词或筛选条件</p>
        </div>
      </div>
    </div>

    <!-- 返回链接 -->
    <div class="text-center mt-5">
      <router-link to="/e-sports" class="view-all-events">
        <i class="fas fa-chevron-left"></i> 返回 CIC-电竞
      </router-link>
    </div>
    
    <div class="form-prompt">
      <p>群信息维护 <span class="text-muted">|</span> 请通过官方表单提交更新</p>
      <a href="https://ecustcic.feishu.cn/share/base/form/shrcn5SJVIvKbkfDZxQsn0djtng" 
        target="_blank" 
        class="link-underline">
        立即填写表单 →
      </a>
    </div>
        
    <!-- 复制成功提示 -->
    <div v-if="showCopySuccess" class="copy-notification">
      已复制群号 {{ copiedGroupNumber }} 到剪贴板
    </div>
  </div>
</template>

<script>
export default {
  name: 'e-sports-detail',
  data() {
    return {
      searchQuery: '',
      selectedCategories: [],
      showCopySuccess: false,
      copiedGroupNumber: '',
      loading: true,
      // defaultAvatar: 'https://qzonestyle.gtimg.cn/qzone/qzact/act/external/tiqq/logo.png',
      categories: [
        { id: 'game', name: '休闲娱乐', icon: 'fas fa-gamepad' },
        { id: 'study', name: '学习交流', icon: 'fas fa-book' },
        { id: 'tech', name: '技术讨论', icon: 'fas fa-code' },
        { id: 'social', name: '友好社团', icon: 'fas fa-users' },
        { id: 'area', name: '区域性交流群', icon: 'fas fa-globe' },
        { id: 'school', name: '学院群', icon: 'fas fa-university' }
      ],
      groups: [],
      appId: 'cli_a8f1d48265fc500e',
      appSecret: 'u2NfRSgPlrI4KUhba3389eyj3LSa4aGR',
      accessToken: null
    }
  },
  computed: {
    filteredCategories() {
      return this.categories.filter(cat => 
        this.getGroupsByCategory(cat.id).length > 0
      )
    },
    filteredGroups() {
      return this.groups.filter(group => {
        const searchMatch = 
          group.group_name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          group.description.toLowerCase().includes(this.searchQuery.toLowerCase())
        
        const categoryMatch = 
          this.selectedCategories.length === 0 || 
          this.selectedCategories.includes(group.category)
        
        return searchMatch && categoryMatch
      })
    }
  },
  methods: {
    getGroupsByCategory(categoryId) {
      return this.filteredGroups.filter(group => group.category === categoryId)
    },
    getGroupCount(categoryId) {
      return this.getGroupsByCategory(categoryId).length
    },
    toggleCategory(categoryId) {
      const index = this.selectedCategories.indexOf(categoryId)
      if (index === -1) {
        this.selectedCategories.push(categoryId)
      } else {
        this.selectedCategories.splice(index, 1)
      }
    },
    copyGroupNumber(number) {
      navigator.clipboard.writeText(number)
      this.copiedGroupNumber = number
      this.showCopySuccess = true
      setTimeout(() => {
        this.showCopySuccess = false
      }, 3000)
    },
    async getTenantAccessToken() {
      try {
        const response = await fetch('https://feishuapi.bestzyq.cn/open-apis/auth/v3/tenant_access_token/internal', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            app_id: this.appId,
            app_secret: this.appSecret
          })
        })
        const data = await response.json()
        if (data.code === 0) {
          this.accessToken = data.tenant_access_token
          return data.tenant_access_token
        } else {
          console.error('获取飞书访问令牌失败:', data)
          return null
        }
      } catch (error) {
        console.error('获取飞书访问令牌出错:', error)
        return null
      }
    },
    
    async fetchGroupsFromFeishu() {
      this.loading = true
      let allGroups = []
      let pageToken = null
      let hasMore = true
      
      try {
        // 获取访问令牌
        const token = await this.getTenantAccessToken()
        if (!token) {
          this.loading = false
          return
        }
        
        // 循环获取所有页的数据
        while (hasMore) {
          // 构建URL，将page_token作为查询参数添加
          let url = 'https://feishuapi.bestzyq.cn/open-apis/bitable/v1/apps/Y9HBbtQoxawALxs3XK8cOY9pn8g/tables/tblVq51wR2ZPVax4/records/search?page_size=100'
          if (pageToken) {
            url += `&page_token=${pageToken}`
          }
          
          // 获取飞书表格数据
          const response = await fetch(url, {
            method: 'POST',
            headers: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({}) // 空请求体，page_token已经在URL中
          })
          
          const data = await response.json()
          if (data.code === 0) {
            // 处理数据，只保留"是否可信"为true的记录
            const pageGroups = data.data.items
              .filter(item => item.fields['是否可信'] === true)
              .map(item => {
                // 将飞书数据映射到我们需要的格式
                const groupId = item.fields['QQ群号']
                // 避免使用可选链操作符，改用传统方式检查属性
                const url = (item.fields['加群链接'] && item.fields['加群链接'].link) || null
                
                // 处理描述字段，现在是一个对象数组
                let description = '暂无描述'
                if (item.fields['描述'] && Array.isArray(item.fields['描述']) && item.fields['描述'].length > 0) {
                  // 将所有文本片段连接起来
                  description = item.fields['描述']
                    .filter(desc => desc.type === 'text')
                    .map(desc => desc.text)
                    .join('')
                }
                
                // 处理群名称字段
                let groupName = `群组(${groupId})`
                let hasValidGroupName = false
                if (item.fields['群名称'] && Array.isArray(item.fields['群名称']) && item.fields['群名称'].length > 0) {
                  const nameText = item.fields['群名称']
                    .filter(name => name.type === 'text')
                    .map(name => name.text)
                    .join('')
                  
                  if (nameText.trim() !== '') {
                    groupName = nameText
                    hasValidGroupName = true
                  }
                }
                
                // 处理群人数字段
                let memberCount = 0
                let maxMemberCount = 0
                let hasValidMemberCount = false
                if (item.fields['群人数'] && Array.isArray(item.fields['群人数']) && item.fields['群人数'].length > 0) {
                  const memberText = item.fields['群人数']
                    .filter(member => member.type === 'text')
                    .map(member => member.text)
                    .join('')
                  
                  // 解析格式为 "1773 / 2000" 的字符串
                  const parts = memberText.split('/')
                  if (parts.length === 2) {
                    memberCount = parseInt(parts[0].trim(), 10) || 0
                    maxMemberCount = parseInt(parts[1].trim(), 10) || 0
                    if (memberCount > 0 && maxMemberCount > 0) {
                      hasValidMemberCount = true
                    }
                  }
                }
                
                // 只有当群名称和群人数都有效时，才将 api_success 标记为 true
                const apiSuccess = hasValidGroupName && hasValidMemberCount
                
                return {
                  group_id: String(groupId), // 确保群号是字符串
                  group_name: groupName,
                  description: description,
                  category: this.mapCategoryFromFeishu(item.fields['类别']),
                  url: url,
                  api_success: apiSuccess, // 根据群名称和群人数是否有效来决定
                  member_count: memberCount,
                  max_member_count: maxMemberCount
                }
              })
            
            // 将当前页的群组添加到总列表中
            allGroups = [...allGroups, ...pageGroups]
            
            // 检查是否有更多页
            hasMore = data.data.has_more
            pageToken = data.data.page_token
            
            // 如果没有更多数据或没有返回页码令牌，则停止循环
            if (!hasMore || !pageToken) {
              break
            }
          } else {
            console.error('获取飞书数据失败:', data)
            hasMore = false
          }
        }
        
        this.groups = allGroups
      } catch (error) {
        console.error('获取群组信息出错:', error)
      } finally {
        this.loading = false
      }
    },
    
    mapCategoryFromFeishu(feishuCategory) {
      // 将飞书中的类别映射到我们的类别ID
      const categoryMap = {
        '学习交流': 'study',
        '休闲娱乐': 'game',
        '技术讨论': 'tech',
        '友好社团': 'social',
        '区域性交流群': 'area',
        '学院群': 'school'
      }
      
      return categoryMap[feishuCategory] || 'social' // 默认为social类别
    }
  },
  created() {
    this.fetchGroupsFromFeishu()
  }
}
</script>

<style scoped>
/* 保持原有的样式不变 */
.qq-groups-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 50px;
}

.hero-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin-bottom: 30px;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 100%;
  padding: 0 15px;
}

.hero-overlay h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-overlay p {
  font-size: 1.2rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.search-filter {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.search-box {
  position: relative;
  margin-bottom: 20px;
}

.search-box i {
  position: absolute;
  right: 15px;
  top: 12px;
  color: #7f8c8d;
}

.search-box input {
  padding-right: 40px;
  border-radius: 50px;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-tags button {
  border-radius: 50px;
  padding: 5px 15px;
}

.filter-tags button.active {
  background-color: #3498db;
  color: white;
}

.category-title {
  font-size: 1.5rem;
  margin: 30px 0 20px;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.category-title i {
  margin-right: 10px;
  color: #3498db;
}

.category-title .badge {
  margin-left: 10px;
  font-size: 0.8rem;
  padding: 5px 10px;
  color: #fff;
}

.group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.group-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.group-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.group-avatar {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  flex-shrink: 0;
}

.group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.group-info {
  flex: 1;
}

.group-info h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: #2c3e50;
}

.group-id {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-bottom: 0px;
}

.group-desc {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 10px;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group-meta {
  font-size: 0.8rem;
  color: #7f8c8d;
}

.group-meta span {
  margin-right: 15px;
}

.group-meta i {
  margin-right: 5px;
  color: #3498db;
}

.group-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}

.btn-join {
  margin-bottom: 10px;
  padding: 5px 15px;
  font-size: 0.9rem;
  border-radius: 5px;
}

.btn-copy {
  padding: 5px 15px;
  font-size: 0.9rem;
  border-radius: 5px;
}

.no-results {
  text-align: center;
  padding: 50px 0;
  color: #7f8c8d;
}

.no-results i {
  color: #3498db;
  margin-bottom: 20px;
}

.no-results h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.copy-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2ecc71;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .hero-overlay h1 {
    font-size: 2rem;
  }
  
  .hero-overlay p {
    font-size: 1rem;
  }
  
  .group-list {
    grid-template-columns: 1fr;
  }
  
  .group-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .group-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .group-actions {
    flex-direction: row;
    margin-left: 0;
    margin-top: 15px;
  }
  
  .btn-join, .btn-copy {
    margin-right: 10px;
    margin-bottom: 0;
  }
  
  /* 移动端群信息维护样式优化 */
  .form-prompt {
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    max-width: none;
    padding: 15px;
  }
}

.view-all-events {
  color: #3498db;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
}

.view-all-events:hover {
  color: #2980b9;
  transform: translateX(-5px);
}

.view-all-events i {
  margin-right: 5px;
  transition: all 0.3s;
}

.view-all-events:hover i {
  transform: translateX(-5px);
}

/* 群信息维护样式 */
.form-prompt {
  background-color: #f1f8fe;
  border: 1px solid #d0e3f7;
  border-radius: 10px;
  padding: 20px;
  margin: 40px auto 20px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.form-prompt:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.form-prompt p {
  font-size: 1rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.form-prompt .text-muted {
  color: #95a5a6;
  margin: 0 8px;
}

.link-underline {
  color: #3498db;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: all 0.3s;
}

.link-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #3498db;
  transition: width 0.3s ease;
}

.link-underline:hover {
  color: #2980b9;
}

.link-underline:hover::after {
  width: 100%;
}
</style>